<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!--bootstrap-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--bootstrap-table-->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
    <!--bootstrap-table-lanuage-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
    <script>
        var mid="",cid="";
        function getCell(id,flag) {
            if(flag=="1"){
                mid=id;
            }
            if(flag=="2"){
                cid=id;
                $.ajax({
                    url:"peidian",
                    type:"get",
                    data:{carid:mid,cellid:cid},
                    success:function(a){
                        alert(a)
                        window.location.reload();
                    }
                })
            }
        }
        function getXiangqing(id){
            $.ajax({
                url:"getCarAll",
                type:"get",
                data:{carid:id},
                success:function(a){
                    alert(a)
                    $("#q").val(a.carVin);
                    $("#q1").val(a.carName);
                    $("#car").html(JSON.stringify(a));
                }
            })
            alert("车辆id"+id)
        }
        //一配电的详情
        function getCellone(cerid) {
            $.ajax({
                url:"findOneCell",
                type:"get",
                data:{carid:cerid},
                success:function(a){
                    $("#s1").text(a.id);
                    $("#s2").text(a.name);
                }
            })

        }
    </script>
</head>
<body>
<form action="findAll">
    <div class="row">
        <div class="col-lg-6" style="width: 400px;">
            <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">模糊查询</button>
          </span>
                <input type="text" th:value="${name}" name="name" class="form-control" placeholder="请输入您要查询的汽车名称" style="width: 300px">
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">精确查询</button>
          </span>
                <input type="text" th:value="${vin}" class="form-control" name="vin" placeholder="请输入您要查询的汽车VIN码" style="width: 300px">
            </div>
        </div>
    </div>
</form>
    <table class="table">
        <tr>
            <td>id</td>
            <td>Vin码</td>
            <td>车名</td>
            <td>生命周期</td>
            <td>车身</td>
            <td>类型</td>
            <td>配置</td>
            <td>颜色</td>
            <td>电池</td>
            <td>是否配电</td>
            <td>操作</td>
        </tr>
        <tr th:each="m : ${pageInfo.getList()}">
            <td>
                <span th:text="${m.id}"></span>
            </td>
            <td>
                <span th:text="${m.carVin}"></span>
            </td>
            <td>
                <span th:text="${m.carName}"></span>
            </td>
            <td>
                    <span th:if="${m.carStuta}=='0'">正常</span>
                    <span th:if="${m.carStuta}=='1'">异常</span>
                    <span th:if="${m.carStuta}=='2'">报废</span>
            </td>
            <td>
                <span th:text="${m.basicInfo.bodyType}"></span>
            </td>
            <td>
                <span th:text="${m.basicInfo.powerType}"></span>
            </td>
            <td>
                <span th:text="${m.basicInfo.mixing}"></span>
            </td>
            <td>
                <span th:text="${m.basicInfo.color}"></span>
            </td>
            <td>
                <span th:each="c : ${m.cellPacks}">
                    <span th:text="${c.name}"></span>
                </span>
            </td>
            <td>
                <span th:text="${m.isPCell}"></span>
            </td>
            <td>
                <span th:if="${m.isPCell}=='已配电'"><input type="button" value="配电电池详情" th:onclick="getCellone([[${m.id}]])" data-toggle="modal" data-target="#y"></span>
              <span th:if="${m.isPCell}=='配电'"><input type="button" th:onclick="getCell([[${m.id}]],1)" value="配电" data-toggle="modal" data-target="#peidian"></span>
                <input type="button" th:onclick="getXiangqing([[${m.id}]])" value="详情" data-toggle="modal" data-target="#myModal">
            </td>
        </tr>
    </table>
    <form  role="form" class="form-horizontal">
        <div id="peidian" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade" style="display: none;">
            <div class="modal-dialog"><div class="modal-content" style="width: 620px; margin-top: 140px;">
                <div class="modal-header">
                    <div class="col-md-12 borderDiv scrollBar" style="height: 500px;">
                        <table class="table">
                            <tr>
                                <td>id</td>
                                <td>name</td>
                            </tr>
                            <tr th:each="c:${cell}">
                                <td>
                                    <span th:text="${c.id}"></span>
                                </td>
                                <td>
                                    <span th:text="${c.name}"></span>
                                </td>
                                <td>
                                    <input type="button" th:onclick="getCell([[${c.id}]],2)" value="配电">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </form>
    <!--连接弹框表结构-->
    <form  role="form" class="form-horizontal">
        <div id="y" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade" style="display: none;">
            <div class="modal-dialog"><div class="modal-content" style="width: 200px; margin-top: 140px;">
                <div class="modal-header">
                    <div class="col-md-12 borderDiv scrollBar" style="height: 200px;">
                        <table class="table">
                            <tr>
                                <td>id</td>
                                <td>name</td>
                            </tr>
                            <tr >
                                <td>
                                    <span id="s1"></span>
                                </td>
                                <td>
                                    <span id="s2"></span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </form>
    <!--连接弹框表结构-->




<!--分页-->
    <nav style="float: left">
        <ul class="pagination">
            <li>
                <a th:if="${not isFirstPage}" th:href="@{${'findAll'}(pageNum=${pageNum-1},pageSize=${pageSize})}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                <a th:if="${isFirstPage}" href="javascript:void(0);" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <li th:each="pageNo : ${#numbers.sequence(1, totalPages)}">
                <a th:if="${pageNum eq pageNo}" href="javascript:void(0);">
                    <span th:text="${pageNo}"></span>
                </a>

                <a th:if="${not (pageNum eq pageNo)}" th:href="@{${'findAll'}(pageNum=${pageNo},pageSize=${pageSize})}">
                    <span th:text="${pageNo}"></span>
                </a>
            </li>

            <li>
                <a th:if="${not isLastPage}" th:href="@{${'findAll'}(pageNum=${pageNum+1},pageSize=${pageSize})}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                <a th:if="${isLastPage}" href="javascript:void(0);" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <br><br>
    <div style="float: left;font-size: 13px">
        当前第<a href="#">
        <span th:text="${pageNum}"></span>
    </a>页
        总<a href="#">
        <span th:text="${totalPages}"></span>
    </a>页
        共计<a href="#">
        <span th:text="${total}"></span>
    </a>条
    </div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    车辆详细信息
                </h4>
            </div>
            <form id="form_data">
                <div class="modal-body">
                    vin: <input style="margin: 8px;" type="text" id="q" />
                    车名: <input style="margin: 8px;" type="text" id="q1" /><br>

                    <span id="car"></span>
                    <input type="hidden" id="act" value="add" name="act"/><br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



</body>
</html>